<!--
 * @Author: w_yy
 * @Date: 2023-03-20 10:42:20
 * @LastEditors: w_yy
 * @LastEditTime: 2023-03-20 16:11:47
 * @FilePath: \vue-project\src\views\List.vue
 * @Copyright: 2023 沈阳东软智睿放疗技术有限公司
 * @Descripttion: 该文件用于OIS系统。版权由东软智睿放疗技术有限公司所有
-->
<template>
  <!-- list 是源数据的数组，而 item 是迭代项的别名
    index  表示当前项的位置索引
  -->
  <div class="list">
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }"
      :data-source="list"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-card :title="item.title" style="margin: 0px 8px 16px"
            >Card content</a-card
          >
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { List, Card } from "ant-design-vue";
export default {
  name: "List",
  components: {
    AList: List,
    ACard: Card,
  },
  setup() {
    let dataInfo = reactive({
      list: [
        {
          title: "title1",
          patientName: "张三",
        },
        {
          title: "title2",
          patientName: "张三1",
        },
        {
          title: "title3",
          patientName: "张三2",
        },
        {
          title: "title4",
          patientName: "张三5",
        },
      ],
      myObject: {
        title: "How to do lists in Vue",
        author: "Jane Doe",
        publishedAt: "2016-04-10",
      },
    });
    //作用域
    dataInfo.list.forEach((item, index) => {
      console.log(item);
      console.log(index);
    });

    return {
      ...toRefs(dataInfo),
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 1280px;
}
</style>